<template>
  <div class="container">
    <el-row style="height: 100%" v-if="showList">
      <el-col :span="5" style="height: 100%">
        <edit-tree
          class="left"
          ref="tree"
          :treeSetting="treeSetting"
          :hideBtn="hideBtn"
          :isSpecial="special"
          @handleClickTree="handleClickTree"
        />
      </el-col>
      <el-col :span="19" class="list">
        <div class="right">
          <list-table-new v-bind="tableConfig" ref="listTable"></list-table-new>
        </div>
      </el-col>
    </el-row>
    <el-row v-else>
      <el-col :span="24">
         <user-list @goBackPage="goBackPage" :currentRowData="currentRowData"></user-list>
      </el-col>
    </el-row>
    <dialogPublic
      :title="title"
      :show.sync="show"
      v-if="show"
      @doSubmit="doSubmit"
      @doClose="() => (show = false)"
    >
      <editForm
        :formConfig="formConfig"
        ref="editForm"
        :formData="editFormData"
      ></editForm>
    </dialogPublic>
  </div>
</template>

<script>
import userList from "./userList";
import { applicationQueryList } from "@/api/systemManagement/applicationManagement.js";
import {
  postConfigList,
  postConfigAdd,
  postConfigDelete
} from "@/api/systemManagement/postConfig.js";
export default {
  components: {
    userList,
  },
  data() {
    return {
      special:true,  //editTree点击特殊处理
      currentRowData:{},
      showList:true,
      show: false,
      title: "",
      selectNode: {
        id: "",
        name: "",
      },
      treeSetting: {
        btnArr: ["add"],
        title: "应用",
        data: [],
        defaultProps: {
          children: "children",
          label: "name",
        },
      },
      hideBtn: true,
      tableConfig: {
        showAllSearch: false,
        showIndex: true,
        selectionShow: false,
        showFilterBtn: false,
        showCustomBtn: false,
        searchObj: {
          searchMethod: (params, that) => {
            if (this.tableConfig.searchObj) {
              this.getTableData(params);
            } else {
            }
          },
          searchArr: [
            {
              type: "input",
              label: "岗位名称",
              model: "postName",
              placeholder: "请输入",
            },
          ],
          queryData: {
            page: 1,
            pageSize: 15,
          },
        },
        tableMethods: {
          rowClick: (e) => {},
        },
        actionList: [
          {
            name: "新增",
            icon: "el-icon-plus",
            method: () => {
              this.addPost();
            },
          },
        ],
        column: [
          {
            label: "岗位名称",
            prop: "postName",
          },
          {
            label: "创建人",
            prop: "createByName",
          },
          {
            label: "创建时间",
            prop: "createTime",
          },
          {
            label: "操作",
            type: "button",
            buttonArr: [
              {
                text: "编辑",
                isShow: () => {
                  return true;
                },
                methods: (row, index) => {
                  this.editRole(row);
                },
              },{
                text: "删除",
                isShow: () => {
                  return true;
                },
                methods: (row, index) => {
                  this.deletePost(row.id);
                },
              },
              {
                text: "所属用户",
                isShow: () => {
                  return true;
                },
                methods: (row, index) => {
                  this.goUserPage(row);
                },
              },
            ],
          },
        ],
        tableData: [],
        paginationObj: {
          pageSizes: [15, 30, 50, 100],
        },
        totalNumber: 0,
      },
      formConfig: {
        labelWidth: "100px",
        itemArr: [
          {
            label: "岗位名称",
            prop: "postName",
            type: "text",
            required: true,
            span: 12,
          },
          {
            label: "岗位排序",
            prop: "sort",
            type: "number",
            span: 12,
            required: true,
          },
          {
            label: "岗位描述",
            prop: "desc",
            type: "textarea",
            span: 12,
          },
        ],
      },
      //弹出框表单数据
      editFormData: {},
    };
  },
  created() {
    
  },
  mounted(){
    this.getTreeData();
  },
  methods: {
    goBackPage(){
      this.showList = true
      this.getTreeData();
      this.handleClickTree(this.currentNode)
    },
    handleClickTree(node) {
      this.currentNode = node
      this.selectNode.id = node.id;
      this.selectNode.name = node.name;
      this.getTableData();
    },
    //跳转到详情页
    goUserPage(row) {
      this.showList = false
      this.currentRowData = row
    },
    //新建菜单
    addPost() {
      this.show = true;
      this.title = "新增岗位";
      this.editFormData = {};
    },
    //编辑菜单
    editRole(row) {
      this.show = true;
      this.title = "编辑岗位";
      this.editFormData = row;
    },
    //删除角色
    deletePost(id) {
        this.$confirm("确定要删除选中数据吗", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            postConfigDelete({ id: id}).then(
              (res) => {
                if (res.code == 200) {
                  this.$message.success(res.description);
                  this.getTableData();
                }
              },
              (err) => {
                this.$message.error(err);
              }
            );
          }).catch((e) => {});
    },
    //新增或修改
    async doSubmit() {
      const params = await this.$refs.editForm.getFormData();
      params.appId = this.selectNode.id
      if (this.title == "新增岗位") {
        let res = await postConfigAdd(params);
        if (res.code == 200) {
          this.$message.success(res.description);
          this.show = false;
        } else {
          this.$message.error(res.description);
        }
      } if (this.title == "编辑岗位") {
        let res = await postConfigAdd(params);
        if (res.code == 200) {
          this.$message.success(res.description);
          this.show = false;
        } else {
          this.$message.error(res.description);
        }
      }
      this.getTableData();
    },
    //获取表格数据
    getTableData(params) {
      if (params) {
        this.$set(this.tableConfig.searchObj, "queryData", params);
      }
      let queryData = Object.assign({}, this.tableConfig.searchObj.queryData);
      queryData.appId = this.selectNode.id;
      postConfigList(queryData).then(
        (res) => {
          if (res.code ==200) {
            this.$set(this.tableConfig, "tableData", res.data.list);
            this.$set(this.tableConfig, "totalNumber", res.data.total);
          }
        },
        (error) => {
          this.$message.error(error);
        }
      );
    },
    //获取组织树数据
    getTreeData() {
      //得到组织树的数据
      applicationQueryList().then(
        (res) => {
          if (res.code == 200 && res.data.length > 0) {
            this.$refs.tree.setTreeData(res.data);
            if(this.selectNode.id ==''){
              this.$refs.tree.setCurrentKey(res.data[0].id);
              this.handleClickTree(res.data[0]);
            }else{
              this.$refs.tree.setCurrentKey(this.currentNode.id);
              this.handleClickTree(this.currentNode);
            }
            let arr = res.data.map((item) => {
              const obj = {
                label: item.name,
                value: item.id,
              };
              return obj; 
            });
          }
        },
        (error) => {
          this.$message.error(error);
        }
      );
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  .list{
    height: 100%;
    padding: 20px;
    border-left: 15px solid #F2F3F8;
  }
  .right {
    width: 100%;
    height: calc(100% - 20px);
  }
}
</style>